<template name="notifications_list_item">
  <div class="list-item border-bottom">
      <!-- TYPE 1 UserMakeFriend -->
      {{#if isType 'UserMakeFriend'}}
        <div class="item-link flex-column{{#unless notification.read}} bg-unmark{{/unless}}">
          <div class="d-flex align-items-center flex-grow-1">
            {{> notificationListItem_avatar 
              avatar=notification.details.avatar
            }}
            {{> notificationListItem_content
              username=notification.details.username
              text=notification.details.text
              time=notification.createdAt
              tooltipTitle=tooltipTitle
            }}
          </div>
          {{> notificationListItem_buttons
            confirm="confirm-make-friend"
            delete="delete-make-friend"
          }}
        </div>
      {{/if}}
      <!-- TYPE 2 UserMakeFriendSuccess -->
      {{#if isType 'UserMakeFriendSuccess'}}
        <div class="item-link flex-column{{#unless notification.read}} bg-unmark{{/unless}}">
          <div class="d-flex align-items-center flex-grow-1">
            {{> notificationListItem_avatar 
              avatar=notification.details.avatar
            }}
            {{> notificationListItem_content
              username=notification.details.username
              text=notification.details.text
              time=notification.createdAt
              tooltipTitle=tooltipTitle
            }}
          </div>
        </div>
      {{/if}}
      <!-- TYPE 3 UserJoinChannel -->
      {{#if isType 'UserJoinChannel'}}
        <div class="item-link flex-column{{#unless notification.read}} bg-unmark{{/unless}}">
          <div class="d-flex align-items-center flex-grow-1">
            {{> notificationListItem_avatar 
              avatar=notification.details.avatar
            }}
            {{> notificationListItem_content
              username=notification.details.username
              text=notification.details.text
              channelId=notification.details.channelId
              time=notification.createdAt
              tooltipTitle=tooltipTitle
            }}
          </div>
          {{> notificationListItem_buttons
            confirm="confirm-join-channel"
            delete="delete-join-channel"
          }}
        </div>
      {{/if}}
      <!-- TYPE 4 UserJoinChannelSuccess -->
      {{#if isType 'UserJoinChannelSuccess'}}
        <div class="item-link flex-column{{#unless notification.read}} bg-unmark{{/unless}}">
          <div class="d-flex align-items-center flex-grow-1">
            {{> notificationListItem_icon}}
            {{> notificationListItem_content
              text=notification.details.text
              channelId=notification.details.channelId
              time=notification.createdAt
              tooltipTitle=tooltipTitle
            }}
          </div>
        </div>
      {{/if}}
      <!-- TYPE 5 -->
      {{#if isType 'invite.user.join.channel'}}
        <div class="item-link flex-column{{#unless notification.read}} bg-unmark{{/unless}}">
          <div class="d-flex align-items-center flex-grow-1">
            {{> notificationListItem_avatar 
              avatar=notification.details.avatar
            }}
            {{> notificationListItem_content
              username=notification.details.username
              text=notification.details.text
              channelId=notification.details.channelId
              time=notification.createdAt
              tooltipTitle=tooltipTitle
            }}
          </div>
          {{> notificationListItem_buttons
            confirm="confirm-invite"
            delete="delete-invite"
          }}
        </div>
      {{/if}}
      <!-- TYPE 6 -->
      <!-- notificationListItem_icon -->
  </div>
</template>

<template name="notificationListItem_icon">
  <div class="avatar avatar-relative">
    <i class="material-icons">notifications</i>
  </div>
</template>

<template name="notificationListItem_avatar">
  <img class="avatar" src="{{avatar}}">
</template>

<template name="notificationListItem_content">
  <div class="d-flex flex-column flex-grow-1">
    <span class="item-title">
      {{#if username}}
        <a href="/u/{{username}}">{{username}}</a>
      {{/if}}
      {{text}}
      {{#if channelId}}
        <a href="/channel/{{channelId}}">{{channelId}}</a>
      {{/if}}
    </span>
    <span class="item-subtitle">{{momentCalendar time}}</span>
  </div>
  <div class="ml-auto dot-mark" title="{{tooltipTitle}}"></div>
</template>

<template name="notificationListItem_buttons">
  <div class="mt-3 px-3">
    <button type="button" class="btn btn-primary btn-sm {{confirm}}" style="margin-left: 40px;">同意</button>
    <button type="button" class="btn btn-light btn-sm {{delete}}">删除请求</button>
  </div>
</template>